<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
		<link rel="stylesheet" type="text/css" href="../../css/api1.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style1.css"/>
		<style>
    html,body {
      height: 100%;
      width: 100%;
    }
		.header-box {
			/*border: 1px solid blue;*/
			position: relative;
			width: 100%;
			height: 43px;
			background-color: #ffffff
		}
		header {
			position: fixed;
			width: 100%;
			height: 43px;
			background-color: #ffffff;
			z-index: 11;
			box-shadow: 0 6px 20px #D7D7D7;
		}
		header .left {
			position: relative;
			width: 21.5px;
			height: 43px;
			left: 15px;
			background-image: url(../../icon/back.png);
			background-size: 21.5px 15.5px;
			background-position: center center;
			background-repeat: no-repeat;
			float: left;
		}
		header .center {
			position: relative;
			left: 37.5%;
			width: 25%;
			height: 43px;
			float: left;
			font-size: 18px;
			line-height: 43px;
		}
		header .right {
			width: 10%;
			height: 43px;
			float: right;
			margin-right: 7%;
			display: table;
		}
		.right .word1 {
			font-size: 14px; color: #6d7cd9; font-weight: bolder; text-align: center;
			line-height: 43px;
      display: table-cell;
      vertical-align: middle;
		}


		.searchbar-box {
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      height: 35px;
      background-color: #fff;
      z-index: 10;
    }
    .searchbar {
      position: fixed;
      width: 100%;
      height: 35px;
      background-color: #fff;
      z-index: 10;
    }
    .inputbar-box {
      position: relative;
      width: 100%;
      height: 100%;
      float: left;
    }
    .inputbar {
      position: relative;
			width: 95%;
			height: 35px;
			margin-left: 7%;
			background-color: #fbfbfb;
      /*margin-left: -47%;
      margin-top: -40%;*/
      border-radius: 5px;
    }
    .input {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .inputbar img {
			position: relative;
			top: 10px;
      width: 16px;
      height: 18px;
      margin-left: 8px
    }

    .content-box {
      position: relative;
      width: 100%;
      height: auto;
    }
    .searchby_cata-box {
      width: 90%;
      height: 30%;
      margin-left: 5%;
    }
    .title_1-box {
      position: relative;
      width: 100%;
      height: 50%;
      display: table;
    }
    .title_1 {
      font-size: 20px; color: #000;
      display: table-cell;
      vertical-align: middle;
    }
    .tag_1-box {
      width: 100%;
      height: 50%;
    }
    .tag_1 {
      width: 33%;
      height: 100%;
      float: left;
    }
    .block_1 {
      position: relative;
      width: 70%;
      height: 50%;
      left: 50%;
      top: 50%;
      margin-left: -35%;
      margin-top: -25%;
      background-color: #ebebeb;
      font-size: 18px; color: #6d7cd9; text-align: center;
      line-height: 150%;
      border-radius: 5px;
    }

    .history-box {
      position: relative;
      width: 90%;
      height: auto;
      margin-left: 5%;
      padding-top: 4%;
			padding-bottom: 10%;
    }
    .title_2-box {
      position: relative;
			float: left;
      width: 100%;
      height: 50px;
    }
    .title_2 {
      font-size: 20px; color: #000;
      float: left;
    }
    .clean_history-box {
      position: relative;
      width: 25%;
      height: 50%;
      float: right;
    }
    .clean_history {
      width: 100%;
      font-size: 12px; color: #959595; text-align: right;
      background-color: #fff;
      border-radius: 3px;

    }
    .tag_2-box {
      position: relative;
      width: 100%;
      height: auto;
    }
    .tag_2 {
      width: 33%;
      height: 40px;
			float: left;
			margin-top: 3%;
    }
    .block_2 {
      position: relative;
      left: 8%;
      width: 88%;
      height: 100%;
      background-color: #fff;
      box-shadow: 0 6px 20px #D7D7D7;
    }
    .word {
      position: relative;
      width: 70%;
      height: 100%;
      font-size: 16px; color: #000; text-align: left ;
      text-indent: 10px;
      line-height: 40px;
      float: left;
    }
    .delete {
      position: relative;
      width: 30%;
      height: 100%;
      font-size: 20px; color: #000; text-align: left ;
      text-indent: 10px;
      line-height: 40px;
      float: left;
    }


    .close {
      width: auto;
      height: 100%;
      font-size: 12px; color: #6d7cd9; text-align: left ;
      padding-left: 15px;
      line-height: 35px;
      float: left;
    }

		.tags_selected_box {
			width: 100%;
			height: 10%;
			position: relative;
      margin-top: 2.5%
		}

    .tags_selected {
      width: 100%;
      height: 10%;
      position: fixed;
      top: 43px;
      z-index: 10;
      background-color: #fff;
      margin-top: 2.5%

    }


    </style>
</head>
<body>
	<div class="header-box">
	<header id="header" class="">
		<div class="left" onclick="back()"></div>
		<div class="center">通知的人</div>
		<div class="right">
			<div class="word1" onclick="fabu()">添加</div>
		</div>

	</header>
	</div>

	<div id="selected_tags" class="tags_selected_box" style="display:none">
	  <div id="tags_box" class="tags_selected">
	  </div>
	</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script type="text/javascript" src="../../script/zepto.min.js"></script> -->
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript">

    var line_num;

    apiready = function(){
        init(); //将相关数组清空
        var tags_box = $('#www');
        tags = $api.byId('tags_box');
        header_H = $api.offset(tags).h;
        header_T = $api.offset(tags).t;

        api.openFrame({
            name: 'at_frm',
            url: './at_frm.html',
            rect: {
                x: 0,
                y: header_T + header_H+60,
                w: api.winWidth,
                h: api.winHeight
            },
            pageParam: {
                name: 'test'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
        tags_box.bind('DOMNodeInserted',function(e){
            $api.setStorage('people_num',tags.children.length);
        })
    };

    function init() {
        cplist= [];
        people_count=0;
        $api.setStorage("people_num",0);
        $api.setStorage("choose_people",[]);
        list_init = $api.domAll(".disabled");
        for (var i =0; i<list_init.length;i++)
        {$api.removeCls(list_init[i], "disabled");}
    }
    function delete_tag(tag) {
        name = tag.parentNode.childNodes[0].innerHTML;
        $api.setStorage('delete_name',name)
        var jsfun ='name = $api.getStorage("delete_name");Reactive(name)'
        api.execScript({
            frameName: 'at_frm',
            script: jsfun
        });
        tag.parentNode.parentNode.parentNode.removeChild(tag.parentNode.parentNode);
        // alert($api.getStorage("people_num"))
        if (($api.getStorage('people_num')-1)%3 == 0) {
            if ($api.getStorage('people_num') == 1) {
                var jsfun ='line_num = Math.floor(($api.getStorage("people_num")-1)/3+1); $api.byId("selected_tags").style.display="none";api.setFrameAttr({name: "at_frm",rect: {x: 0,y:60+60*line_num,w: api.winWidth,h: api.winHeight},});'
                api.execScript({
                    name: 'at_win',
                    script: jsfun
                });
            }
            else {
                var jsfun ='line_num = Math.floor(($api.getStorage("people_num")-1)/3+1); $api.byId("selected_tags").style.display="";api.setFrameAttr({name: "at_frm",rect: {x: 0,y:60+60*line_num,w: api.winWidth,h: api.winHeight},});'
                api.execScript({
                    name: 'at_win',
                    script: jsfun
                });
            }
        }
        count = $api.getStorage('people_num');
        $api.setStorage('people_num',parseInt(count)-1);
    }

    function back(){
        api.historyBack({
        }, function(ret, err) {
            if (!ret.status) {
                api.closeWin();
            }
        });
    }



    function fabu(){
        var people_list = $api.getStorage('people_list');  //用户关注的标签
        var choose_people = $api.getStorage('choose_people'); //用户选择的标签
        var jsFun = 'insert_at()'
        api.execScript({
            name: 'question_main',
            script: jsFun
        });

        if (choose_people.length != 0) {
            api.historyBack({
            }, function(ret, err) {
                if (!ret.status) {
                    api.closeWin();
                }
            });
            // var index = people_list.indexOf(choose_people[0]);
            // api.openWin({
            // 		name: 'viewby_cata_hobby',
            // 		url: '../html/viewby_cata_hobby.html',
            // 		bgColor: "#fff",
            //     pageParam: {
            //       tag_index: index
            //     }
            // });
            // qs_dict = {
            //     "app_version":"",
            //     "user_id":"e3b3dc8d20b7052f5c0799f3aa4e9f3e",
            //     "user_cookie":"fd2066e452fa3d60130e227412e51051",
            //     "type":"homework",
            //     "reward": $api.getStorage('reward'),
            //     "title": $api.getStorage('title'),
            //     "detail": $api.getStorage('content'),
            //     "tag": choose_people
            // }
            // $.ajax({
            //   type: 'POST',
            //   // url: "http://1.82.238.228:80/api/questionAnswer/getAnswer/",
            //   url: "http://1.82.238.228:80/api/questionAnswer/postQuestion/",
            //   data:JSON.stringify(qs_dict),
            //   // crossDomain: true,
            //   dataType: 'json',
            //   async: false,
            //   success:function(result){
            //     console.log('创建问题成功,ID:'+result.data['question_id']);
            // 		$api.setStorage('new_question',result.data['question_id']);
            //   },
            //   error:function(){
            //     console.log('创建问题失败');
            //   }
            // });
            // location.reload();
        }
    }


</script>
</html>
